<template>
    <div class="templateFont">
        <a-row type="flex" justify="space-between">
            <a-col class="title" :span="12"> 模板字体配置</a-col>
        </a-row>
        <a-checkbox-group v-model:value="selectedNodeKeys" style="width: 100%">
            <a-row :gutter="16">
                <a-col v-for="(item, index) in templateFontList" :key="index">
                    <a-checkbox :value="item.value" @change="handleSave">{{ item.label }}</a-checkbox>
                </a-col>
            </a-row>
        </a-checkbox-group>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, watch, ref, createVNode } from 'vue';
import useMerchant from '../useMerchant';
import { editMerchantExpand, getMerchantExpand } from '@/api/merchant';
import { useI18n } from 'vue-i18n';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
interface State {
    selectedNodeKeys: (string | number)[];
    id: number;
}
export default defineComponent({
    props: {
        merchantExpandData: {
            type: Object,
            default: () => false,
        },
    },
    setup(props) {
        const { t } = useI18n();
        const templateFontList = ref([
            { label: '思源黑体', value: 'A', isDefault: true },
            { label: '雅思细体', value: 'B', isDefault: false },
            { label: '方正楷体简体', value: 'C', isDefault: true },
            { label: '隶书', value: 'D', isDefault: true },
            { label: '幼圆', value: 'E', isDefault: true },
        ]);

        const state: State = reactive({
            selectedNodeKeys: [],
            id: 0,
        });

        watch(
            () => props.merchantExpandData,
            (merchantExpandData) => {
                const { id, templateFont } = merchantExpandData as NormalObj;
                state.selectedNodeKeys = templateFont.split(',');
                state.id = id;
            }
        );

        // 选择项发生改变
        const handleSave = (keys: any) => {
            console.log(keys.target);
            let checked = keys.target.checked;
            let value = keys.target.value;
            Modal.confirm({
                title: t('yl.tip'),
                icon: createVNode(ExclamationCircleOutlined),
                content: t('yl.changeDeptStatusConfirm', { status: keys ? t('yl.enable') : t('yl.disable'), name: '11' }),
                onOk() {
                    editMerchantExpand({ id: state.id, templateFont: state.selectedNodeKeys.join(',') })
                        .then(() => {
                            // const timer = setTimeout(() => {
                            //     handleInitQuery(tableQuery);
                            //     clearTimeout(timer);
                            // }, 500);
                        })
                        .catch(() => {});
                },
                onCancel() {
                    if (checked) {
                        for (let i = 0; i < state.selectedNodeKeys.length; i++) {
                            if (state.selectedNodeKeys[i] === keys.target.value) {
                                state.selectedNodeKeys.splice(i, 1);
                            }
                        }
                    } else {
                        state.selectedNodeKeys.push(value);
                    }
                },
            });
            // 多余的操作 接口数据类型问题
        };

        return {
            handleSave,
            templateFontList,
            ...toRefs(state),
        };
    },
});
</script>

<style lang="scss">
.templateFont {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background: #fafafa;
    position: relative;
    margin-top: 15px;

    .title {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #161616;
    }
    .desc {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #161616;
    }
    .content {
        margin-top: 10px;
        .item {
            margin-bottom: 14px;
            margin-right: 20px;
        }
    }
    .action {
        position: absolute;
        bottom: 20px;
        left: 20px;
    }
}
</style>
